import { createBrowserRouter } from "react-router";
import Layout from "../layout";
import Home from "../pages/Home";
import About from "../pages/About";
import UseState from "../pages/UseState";
import UseReducer from "../pages/UseReducer";
import UseContext from "../pages/UseContext";
import UseEffect from "../pages/UseEffect";
import UseLayoutEffect from "../pages/UseLayoutEffect";
import UseMemo from "../pages/UseMemo";
import UseRef from "../pages/UseRef";
import UseImperativeHandle from "../pages/UseImperativeHandle";
import UseCallback from "../pages/UseCallback";
import UseTransition from "../pages/UseTransition";
import UseDeferredValue from "../pages/UseDeferredValue";
import UseId from "../pages/UseId";
import UseSyncExternalStore from "../pages/UseSyncExternalStore";
import GlobalComp from "../pages/GlobalComp";
import Comp2 from "../pages/Comp2";
import Comp3 from "../pages/Comp3";
import Comp4 from "../pages/Comp4";
import TodoList from "@/pages/TodoList";
import TicTacToe from "@/pages/TicTacToe/demo";
import ZustandBase from "@/pages/Zustand/Base";
import ZustandStatusHandling from "@/pages/Zustand/StatusHandling";
import ZustandStatusSimplification from "@/pages/Zustand/StatusSimplification";
import ZustandMiddleware from "@/pages/Zustand/Middleware";
import ZustandSubscribe from "@/pages/Zustand/Subscribe";
// const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
const router = createBrowserRouter([
  {
    Component: Layout,
    path: '/',
    children: [
      {
        index: true,
        Component: Home,
      },
      {
        path: "about",
        Component: About,
      },
      {
        path: "intro/:id/:name?",
        // 使用懒加载打包后，会把懒加载的组件打包成一个独立的文件，从而减小主包的大小
        lazy: async() => {
          // await sleep(2000)
          const Component = await import('../pages/Intro')
          return { Component: Component.default }
        }
      },
      {
        path: 'todoList',
        Component: TodoList,
      },
      {
        path: 'ticTacToe',
        Component: TicTacToe,
      },
      {
        path: 'hooks',
        children: [
          {
            path: 'useState',
            Component: UseState,
          },
          {
            path: 'useReducer',
            Component: UseReducer,
          },
          {
            path: 'useContext',
            Component: UseContext,
          },
          {
            path: 'useEffect',
            Component: UseEffect,
          },
          {
            path: 'useLayoutEffect',
            Component: UseLayoutEffect,
          },
          {
            path: 'useMemo',
            Component: UseMemo,
          },
          {
            path: 'useRef',
            Component: UseRef,
          },
          {
            path: 'useImperativeHandle',
            Component: UseImperativeHandle,
          },
          {
            path: 'useCallback',
            Component: UseCallback,
          },
          {
            path: 'useTransition',
            Component: UseTransition,
          },
          {
            path: 'useDeferredValue',
            Component: UseDeferredValue,
          },
          {
            path: 'useId',
            Component: UseId,
          },  
          {
            path: 'useSyncExternalStore',
            Component: UseSyncExternalStore,
          },
        ]
      },
      {
        path: 'components',
        children: [
          {
            path: 'global',
            Component: GlobalComp,
          },
          {
            path: 'comp2',
            Component: Comp2,
          },
          {
            path: 'comp3',
            Component: Comp3,
          },
          {
            path: 'comp4',
            Component: Comp4,
          },
        ]
      },
      {
        path: 'zustand',
        children: [
          {
            path: 'base',
            Component: ZustandBase,
          },
          {
            path: 'statusHandling',
            Component: ZustandStatusHandling,
          },
          {
            path: 'statusSimplification',
            Component: ZustandStatusSimplification,
          },
          {
            path: 'middleware',
            Component: ZustandMiddleware,
          },
          {
            path: 'subscribe',
            Component: ZustandSubscribe,
          }
        ],
      }
    ],
  },
  
]);

export default router;